<template>
  <div class="dynamic-container">
    <el-table
      :data="handleData(accountListData)"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="dynamic-edit-table-cell"
      fit
      hightlight-current-row
    >
      <EmptyPlaceholder slot="empty" is-border mode="table" style="padding-bottom: 0;" />
      <el-table-column
        v-if="showSerial"
        align="left"
        label="序号"
        width="50">
        <template slot="header" slot-scope="scope">
          <div class="dynamic-table-header">
            <span class="label">{{ scope.column.label }}</span>
          </div>
        </template>
        <template slot-scope="scope">
          <div style="padding-left:12px;">{{ (page-1)*perPage+scope.$index +1 }}</div>
        </template>
      </el-table-column>
      <template v-for="(settingItem, index) in listSetting">
        <el-table-column
          :key="index"
          :label="settingItem.label"
          v-bind="settingItem.prop || {}"
          :width="settingItem.width || '100px'"
          align="left">
          <template slot="header" slot-scope="scope">
            <div class="dynamic-table-header">
              <span class="label">{{ scope.column.label }}</span>
            </div>
          </template>
          <template slot-scope="scope">
            <!-- 只读模式 -->
            <div :style="settingItem.showType==='price'?{justifyContent: 'flex-end'}:''" class="read-content">
              <SecretText
                v-if="settingItem.showType==='secret'"
                :log-text="getLogText(scope.row.payName, settingItem.label)"
                :origin-text="scope.row[settingItem.keyword]" />
              <PriceColumn v-else-if="settingItem.showType==='price'" :real-val="scope.row[settingItem.keyword]" :price="scope.row[settingItem.keyword]" />
              <span v-else-if="settingItem.type === 'datepicker'">{{ scope.row[settingItem.keyword] | format('YYYY/MM/DD') }}</span>
              <span v-else-if="settingItem.renderType === 'filter'">{{ dataFilter(scope.row[settingItem.keyword], settingItem) }}</span>
              <span v-else-if="settingItem.type === 'select'">{{ settingItem.keyword === 'isBindCloud'? getBindValue(scope.row[settingItem.keyword]) : selectFilter(scope.row[settingItem.keyword], settingItem) }}</span>
              <template v-else>
                <ToolTip :content="scope.row[settingItem.renderKeyword] || scope.row[settingItem.keyword]"/>
              </template>
            </div>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        v-if="showOperateColumn"
        :width="80"
        align="left"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <div style="color: red; cursor: pointer;" @click="handleDelete(scope.row)">删除</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="accountListData.length > 10" style="margin-top:12px;display:flex;">
      <span style="flex:1"/>
      <el-pagination
        :page-sizes="[10, 20,50, 100, 250, 500]"
        :current-page="page"
        :page-size="perPage"
        :total="accountListData.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
/**
 * 动态编辑表格：listSetting的属性说明
 *
 * @param {string}  label   名称
 * @param {string}  keyword 字段
 * @param {string}  width   宽度
 * @param {Boolean}  isRequired   必填
 * @param {string}  type    编辑状态时的类型：inputText(字符串输入框)、inputNumber(数字输入框)、select(不能下拉加载的下拉框)
 * @param {array}  options  下拉选项
 * @param {string}  renderType  只读模式渲染内容方式：filter(根据options列表渲染名称)
 */

import emptyIcon from '@/assets/empty-invoice.png';
import emptyDataIcon from '@/assets/empty-data-icon.png';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import Title from '@/components/Title';
import { format } from '@/filters/date';
// data

export default {
  components: { Title, EmptyPlaceholder },
  filters: { format },
  props: {
    accountListData: {// 收款账户列表
      type: Array,
      default: () => []
    },
    showSerial: {// 是否显示序号列
      type: Boolean,
      default: true
    },
    accountList: {
      type: Array,
      default: () => []
    },
    channelName: {
      type: String,
      default: ''
    },
    moduleName: {
      type: String,
      default: ''
    },
    showOperateColumn: { // 展示操作栏
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listSetting: this.accountList,
      emptyDataIcon,
      page: 1,
      perPage: 10,
      emptyIcon
    };
  },
  methods: {
    handleData(data) {
      return data.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    dataFilter(rowData, settingItem) {
      if ((rowData || rowData === 0) && settingItem && settingItem.options) {
        const obj = settingItem.options.find(i => Number(i.id) === Number(rowData));
        return obj ? obj.name : '--';
      }
      return '--';
    },
    getBindValue(num) {
      const bindData = {
        0: '已绑定',
        1: '未绑定'
      };
      return bindData[num] || '--';
    },
    selectFilter(rowData, settingItem) {
      if ((rowData || rowData === 0) && settingItem && settingItem.options) {
        const obj = settingItem.options.find(i => Number(i.value) === Number(rowData));
        return obj ? obj.label : '--';
      }
      return '--';
    },
    numberInputChange(row, key) {
      if (row[key]) row[key] = Number(row[key]).toFixed(2);
    },
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    getLogText(payName, label) {
      return `${this.moduleName || '签约内审'}${this.channelName} 收款账户${payName} 的 ${label}`;
    },
    handleDelete(data) {
      this.$emit('onDelete', data);
    }
  }
};
</script>
<style lang="scss">

.dynamic-order-cascader-popper-class {
  &::v-deep {
    .el-input {
      width: 250px;
    }
    .el-cascader-panel .el-cascader-menu__wrap {
      height: unset !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.read-content {
  color: #333333;
  display: flex;
  .overflow {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.line{
    width: 0px;
    height: 14px;
    border: 1px solid #DDDDDD;
    margin: 0 9px;
}
.dynamic-container {
  margin-top: 15px;
  .dynamic-table-header {
    display:flex;align-items:center;
    .label {
      color: #141C3D;
      font-weight: 600;
    }
  }
  &::v-deep {
    .el-table__empty-block{
      height: 48px !important;
      min-height: 48px;
      width: 100% !important;
      // border-bottom: 1px solid #EBEEFD;
    }
    .dynamic-edit-table-cell {
      background: #F9F9F9;
    }
    .el-table__fixed {
      &::before {
        background-color: transparent;
      }
    }
    .el-table__fixed-right {
      &::before {
        background-color: transparent;
      }
    }
    .el-table--border::after {
      background-color: transparent;
    }
    .el-table {
      border-color: transparent;
      &::before {
        background-color: transparent;
      }
      .el-table__empty-text {
        line-height: 48px !important;
      }
      thead {
        th.dynamic-edit-table-cell {
          &:last-child {
            border-right-color: transparent;
          }
          &:nth-last-child(2) {
            border-right-color: transparent;
          }
        }
      }
      tbody {
        tr {
          td:last-child {
            border-right-color: transparent;
          }
        }
        .el-table__row {
          &:last-child {
            td {
              border-bottom: 1px solid #EBEEF5;
            }
          }
        }
      }
    }
    .el-date-table,.el-year-table,.el-month-table {
      th {
        border-right: none;
      }
    }
    .el-date-table td {
      padding: 4px 0 !important; border: none !important;
    }
    .el-year-table td {
      padding: 20px 3px !important; border: none !important;
    }
    .el-month-table td {
      padding: 8px 0 !important; border: none !important;
    }
  }
}
</style>
